<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 
     创建实例 - 初始化渲染 
      1. 准备容器
      2. 引包-官网 开发版本 - 错误提示更完善
      3. 创建vue实例
      4. 指定配置项
         el 指定挂载点
         data 提供数据
   -->
   <div class="" id="app">
    <p>{{msg}}</p>
    <p>{{msg+'你好'}}</p>
    <!-- 插值表达式
     toUpperCase() 将字符串转换为大写-->
    <p>{{msg.toUpperCase()}}</p>
    <!-- 三元运算符 -->
    <p>{{age>18?'成年':'未成年'}}</p>
    <!-- 对象的属性姓名 -->
    <p>{{friend.name}}</p>
    <!-- 对象的属性描述 爱好 -->
    <p>{{friend.desc}}</p>
    <p title="标题">{{msg}}</p>
</div>
<input id="cs" type="text">


<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'tony',
            age:  18,
            // 描述
            friend:{
                name:'zk',
                desc:'我喜欢编程'
            }
        }
    })
</script>
</body>

</html>